<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			.finish{
				color: #0D90F8;
				text-decoration: underline;
				font-weight: 700;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1 v-html="title"></h1>
			<input type="text" v-model="newItem" @keyup.enter="addNEW()"/>
			<ul>
				<li v-for="list in items"  :class="{ finish : list.isfinished}" @click="TaskFinish(list)">{{list.item}}</li>
			</ul>
			<!--v:on的多种附加选项：1.stop:停止冒泡。2.prevent:阻止默认事件。3.@submit.prevent阻止form提交。4.@keyup.enter=""：enter键弹起时触发事件。5.@click.once=点击触发回调函数仅一次->
			<div onclick="alert(1);" style="width: 100px;height: 100px;background: red;">
				<button @click.stop="alert">ALERT</button>
			</div>
			<!--:class的多种用法,1.:class='[classA,classB]',引号里面是方括号，表示里面数据会从data中获取；2.:class='{red:isRed}'花括号前面是class名称，后面判断条件-->
		</div>
		<script type="text/x-template">
			
		</script>
	</body>
	<script>
		/*定义保存数组的函数*/
		var STROGE_KEY = 'todays_items';
		var LocalS = {
			save:function(item){
					window.localStorage.setItem(STROGE_KEY,JSON.stringify(item))
			},
			fetch:function(){
				return JSON.parse(window.localStorage.getItem(STROGE_KEY) || '[]')
			}
		}
		var app = new Vue({
			el:"#app",
			data:{
				title:'Working List <span>!!!</span>',
				items:LocalS.fetch(),
				newItem:'',
				//错误示范
//				TaskFinish(item){ == TaskFinish:function(){}
//					console.log(item)
//				}
			},
			methods:{
				TaskFinish(item){
					item.isfinished =  !item.isfinished
				},
				alert(){
					alert(2)
				},
				addNEW(){
					this.items.push({item:this.newItem,isfinished:false})
					this.newItem = ''
				}
			},
			watch:{
				items:{
					handler:function(items){
						console.log(items)
						LocalS.save(items)
					},
					deep:true
				},
			}
		})
		
	</script>
</html>
